import Taro from "@tarojs/taro";
import { View } from "@tarojs/components";

import ByButton from "@/components/ui/ByButton";
import Uploader from "@/components/app/Uploader";
import ByImageGroup from "@/components/ui/ByImageGroup";
import PopupContainer from "@/components/app/PopupContainer";

import useForm from "@/hooks/useForm";
import ApiBudget from "@/api/budget";

export default ({
  billDetailId,
  onSuccess,
  onCancel,
}: {
  billDetailId: number;
  onSuccess: () => void;
  onCancel: () => void;
}) => {
  // 提交表单
  const { loading, model, setModel, submit } = useForm<{
    billDetailId: number;
    pics: string[];
  }>(ApiBudget.materialConfirmUploadPic, {
    defaultModel: { billDetailId, pics: [] },
    rules: {
      pics: { type: "array", required: true, message: "请上传图片" },
    },
    onSuccess() {
      Taro.showToast({ title: "操作成功" });
      onSuccess();
    },
  });

  return (
    <PopupContainer title="上传图片" onCancel={onCancel}>
      <View className="p-3">
        <ByImageGroup
          urls={model.pics}
          showDelete
          onChange={(res) => setModel({ pics: res })}
          slotFooter={
            <Uploader
              size={140}
              // openWatermask
              onSuccess={(res) =>
                setModel({
                  pics: [...model.pics, ...res],
                })
              }
            />
          }
        />
      </View>

      <ByButton
        size="large"
        loading={loading}
        className="w-2/3 my-3"
        onClick={() => submit()}
      >
        上传照片
      </ByButton>
    </PopupContainer>
  );
};
